<template lang="">
  <el-popover placement="bottom" width="200" trigger="click">
      <div>
          <el-color-picker v-model="color"  show-alpha></el-color-picker>
          <span class="chooseColor">点击选择颜色</span>
      </div>

      </div>
      <el-card shadow="hover" slot="reference">
          <div>
              <i class="el-icon-ship"></i>
              <p>切换纯色背景</p>
          </div>
      </el-card>
  </el-popover>
</template>
<script>
export default {
  name: 'WallPaperNat',
  data () {
    return {
      color: 'rgba(19, 206, 102, 0.8)'
    }
  },
  watch: {// 监听颜色变化，newvalue为改变后的值，oldvalue为改变前的值
    color (newValue, oldValue) {
      let paperObj = {
        url: this.color,
        type: 'color'
      }
      if (newValue == null) {
        this.color = '#F5FFF7'
      }
      if (newValue != '') {
        this.$bus.$emit('wallPaper', paperObj)
      }
    }
  },
  mounted () {
    //获取wallPaper的对象，且当type为color时，将wallPaper对象的url属性赋值给color
    if (JSON.parse(localStorage.getItem('wallPaper')).type == 'color') {
      this.color = JSON.parse(localStorage.getItem('wallPaper')).url
    }
    this.$bus.$on('delColor', () => {
      this.color = ''//当事件被触发时，将color置为空
    })
  },
  beforeDestroy () {
    this.$bus.$off('delColor')//在组件实例销毁之前调用。移除 delColor 事件监听器：
  },
}
</script>
<style scoped>
.el-card {
  background-color: rgba(38, 157, 128, 0.5);
  color: #fff;
  /* height: 165px; */
  cursor: pointer;
}

div {
  margin: 0 auto;
}

i {
  display: block;
  font-size: 100px;
  text-align: center;
}

p {
  text-align: center;
}
</style>

